<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="perspective.js"></script>
		<title>test</title>
		<script type="text/javascript">
			function XY(x,y){
				this.x=x;
				this.y=y;
				}
			function WH(w,h){
				this.w=w;
				this.h=h;
				}
			function XYZ(x,y,z){
				this.x=x;
				this.y=y;
				this.z=z;
				}
			function POV(){
				this.camera=new XYZ(0,0,300);//the 3D position of a point C representing the camera 
				this.ray=new XYZ(1*Math.PI,0*Math.PI,0*Math.PI);//the orientation of the camera (represented, for instance, by Tait–Bryan angles)
				this.viewer=new XYZ(0,0,600);//the viewer's position relative to the display surface 
				this.xy=function(point){
					var d=new XYZ(0,0,0);//the 2D projection of 'a'
					var b=new XY(0,0);//result
					d.x=Math.cos(this.ray.y)
						*(Math.sin(this.ray.z)*(point.y-this.camera.y)+Math.cos(this.ray.z)*(point.x-this.camera.x))
						-Math.sin(this.ray.y)*(point.z-this.camera.z);
					d.y=Math.sin(this.ray.x)
						*(Math.cos(this.ray.y)*(point.z-this.camera.z)+Math.sin(this.ray.y)*(Math.sin(this.ray.z)*(point.y-this.camera.y)+Math.cos(this.ray.z)*(point.x-this.camera.x)))
						+Math.cos(this.ray.x)*(Math.cos(this.ray.z)*(point.y-this.camera.y)-Math.sin(this.ray.z)*(point.x-this.camera.x));
					d.z=Math.cos(this.ray.x)
						*(Math.cos(this.ray.y)*(point.z-this.camera.z)+Math.sin(this.ray.y)*(Math.sin(this.ray.z)*(point.y-this.camera.y)+Math.cos(this.ray.z)*(point.x-this.camera.x)))
						-Math.sin(this.ray.x)*(Math.cos(this.ray.z)*(point.y-this.camera.y)-Math.sin(this.ray.z)*(point.x-this.camera.x));
					b.x=(d.x-this.viewer.x)*(this.viewer.z/d.z);
					b.y=(d.y-this.viewer.y)*(this.viewer.z/d.z);
					return b;
					};
				}
			//var mapWidth=3503;
			//var mapHeight=2203;
			var watchShift=false;
			var clickX=0;
			var clickY=0;
			var overX=0;
			var overY=0;
			var downX=0;
			var downY=0;
			var watchX=0;
			var watchY=0;
			var shiftX=0;
			var shiftY=0;
			var canvas=undefined;
			var c2d=undefined;
			var pov=new POV();
			//var points = [[mapWidth*.2,0],[mapWidth*0.8,0],[mapWidth,mapHeight],[0,mapHeight]];
			//var crumpled=undefined;
			var image=undefined;
			var imageCanvas = document.createElement('canvas');
			function init(){
				canvas=document.getElementById('workCanvas');
				c2d=canvas.getContext('2d');
				
				image=document.getElementById("runner");
				imageCanvas=document.createElement('canvas');
				imageCanvas.width=image.width;
				imageCanvas.height=image.height;
				imageContext=imageCanvas.getContext('2d');
				imageContext.drawImage(image,0,0);
				//c2d.drawImage(image,0,0);
				
				
				//crumpled = new html5jp.perspective(c2d,image);
				draw();
					
				canvas.onclick=function(e){
					watchShift=false;
					clickX=e.pageX-canvas.offsetLeft;
					clickY=e.pageY-canvas.offsetTop;
					//alert('click');
					//--me.mousePressed.value(false);
					//me.shiftX.value(me.watchX+me.clickX.value()-me.downX.value());
					//me.shiftY.value(me.watchY+me.clickY.value()-me.downY.value());
					draw();
					};
				canvas.onmousemove=function(e){
					overX=e.pageX-canvas.offsetLeft;
					overY=e.pageY-canvas.offsetTop;
					if(watchShift){
						shiftX=watchX+overX-downX;
						shiftY=watchY+overY-downY;
						draw();
						}
					};
				canvas.onmousedown=function(e){
					downX=e.pageX-canvas.offsetLeft;
					downY=e.pageY-canvas.offsetTop;
					watchX=shiftX;
					watchY=shiftY;
					//me.mousePressed.value(true);
					watchShift=true;
					};				
				};
			function draw2(){
				c2d.clearRect(0,0,1200,800);
				c2d.fillStyle='#123456';
				c2d.fillRect(0,0,1200,800);
				var pw=1100;
				var topw=700;
				var ph=500;
				var pivotX=500;
				//pw/2-shiftX;
				var pivotY=300;
				var widthStep=(pw-topw)/ph;
				var yStep=image.height/ph;
				var preY=0;
				var xDelta=(2*(pivotX-shiftX)/pw)*((pw-topw)/ph)/2;
				
				var xx=shiftX;//if(xx<50)xx=50;
				var yy=shiftY;//if(yy<50)yy=50;
				
				for(var y=0;y<ph;y++){
					var rr=Math.sin((Math.PI/2)*(y/ph));
					var hBlock=rr*image.height;
					if(hBlock-preY>0){
						c2d.drawImage(imageCanvas
							,0,preY,image.width,hBlock-preY
							,xx+((ph-y)*xDelta),yy+y,pw-(widthStep*(ph-y)),1
							);	
						preY=hBlock;
						}
					}
				}
			function draw3(){
				c2d.clearRect(0,0,1200,800);
				c2d.fillStyle='#67AA39';
				c2d.fillRect(0,0,1200,800);
				var xy1;
				var xy2;
				var xy3;
				var xy4;
				var ys=-800;
				var hh;
				pov.camera=new XYZ(0,0,200);
				pov.viewer=new XYZ(0,0,1000);
				for(var nn=0;nn<image.height-1;nn++){
					xy1=pov.xy(new XYZ(-image.width/2+shiftX,ys,nn-image.height+shiftY));
					xy2=pov.xy(new XYZ(+image.width/2+shiftX,ys,nn-image.height+shiftY));
					xy3=pov.xy(new XYZ(+image.width/2+shiftX,ys,nn-image.height+2+shiftY));
					xy4=pov.xy(new XYZ(-image.width/2+shiftX,ys,nn-image.height+2+shiftY));
					hh=xy4.y-xy1.y;
					if(hh<1)hh=1;
					c2d.drawImage(imageCanvas
							,0,nn,image.width,2
							,xy1.x+600,xy1.y-400,xy2.x-xy1.x,hh
							);	
					}
				}
			function squeeze(xy){
				var ratioX=0.002;
				var ratioWidth=0.5;
				var addX=0.1;
				var maxY=500;
				//var rxy=new XY(xy.x*xy.y*ratioX+xy.x*ratioWidth-xy.y*addX
				//			,0.03*xy.y*Math.sqrt(xy.y));
				//var ry=maxY-maxY*(Math.cos(0.7*(Math.PI/2)*(xy.y/maxY)));
				//var rx=xy.x*ry*ratioX+xy.x*ratioWidth-ry*addX;
				
				var ry=0.3*xy.y*xy.y/maxY;
				var rx=xy.x*ry*ratioX+xy.x*ratioWidth-ry*addX;
				
				var rxy=new XY(rx,ry);
				return rxy;
				}
			function unsqueeze(xy){
				var ratioX=0.002;
				var ratioWidth=0.5;
				var addX=0.1;
				var maxY=500;
				var uy=Math.sqrt(xy.y*maxY/0.3);
				var ux=(xy.x+xy.y*addX)/(xy.y*ratioX+ratioWidth);
				//alert(":"+ux+"x"+uy);
				return new XY(ux,uy);
				}
			function draw(){
				c2d.clearRect(0,0,1200,800);
				c2d.fillStyle='#67AA39';
				c2d.fillRect(0,0,1200,800);
				c2d.lineWidth=1;
				c2d.beginPath();
				var shiftX=100;
				var shiftY=50;
				var cellWidth=50;
				var cellHeight=50;
				var cellWidthCount=10;
				var cellHeightCount=10;
				var ratioX=0.003;
				
				c2d.rect(shiftX, shiftY, cellWidthCount*cellWidth, cellHeightCount*cellHeight);
				c2d.fillStyle = "#8ED6FF";
				c2d.fill();
				
				for(var x=0;x<cellWidthCount+1;x++){
					var from=squeeze(new XY(x*cellWidth,0));
					var to=squeeze(new XY(x*cellWidth,cellHeightCount*cellHeight));
					c2d.moveTo(shiftX+from.x,shiftY+from.y);
					c2d.lineTo(shiftX+to.x,shiftY+to.y);
					
					c2d.moveTo(shiftX+x*cellWidth,shiftY+0);
					c2d.lineTo(shiftX+x*cellWidth,shiftY+cellHeightCount*cellHeight);
					}
				c2d.strokeStyle="#009900";
				c2d.stroke();
				c2d.closePath();
				c2d.beginPath();
				for(var y=0;y<cellHeightCount+1;y++){
					var from=squeeze(new XY(0,y*cellHeight));
					var to=squeeze(new XY(cellWidthCount*cellWidth,y*cellHeight));
					c2d.moveTo(shiftX+from.x,shiftY+from.y);
					c2d.lineTo(shiftX+to.x,shiftY+to.y);
					
					c2d.moveTo(shiftX+0,shiftY+y*cellHeight);
					c2d.lineTo(shiftX+cellWidthCount*cellWidth,shiftY+y*cellHeight);
					}
				//alert(Math.sin(Math.PI));
				c2d.strokeStyle="#0000ff";
				c2d.stroke();
				c2d.closePath();
				
				var click=unsqueeze(new XY(clickX-shiftX,clickY-shiftY));
				c2d.rect(shiftX+click.x, shiftY+click.y, 4, 4);
				c2d.fillStyle = "#ff0000";
				c2d.fill();
				
				}
		</script>
	</head>
	<body onload="init()">
		<canvas id="workCanvas" width="1200" height="800" >0</canvas>
		<img id="runner" src="vk.jpg" style="display:none" />
	</body>
</html>
